<!--影院-->
<template>
    <div>
        <Toopbar></Toopbar>
        <div class="main">
            <section class="cinema-view">
                <div class="district">
                    <div class="title">
                        <span>宝安区</span>
                    </div>
                    <div class="content">
                        <div class="cinema-wrap">
                            <div class="cinema clearfix">
                                <div class="cinema-title">
                                    <div class="title-cinemaname">
                                        <i>深圳宝影国际影城</i>
                                        <i class="iconfont"></i>
                                        <i class="iconfont"></i>
                                    </div>
                                    <span class="title-tip">
                                        <i class="tip-1">可乐爆米花</i>
                                        <i class="tip-2">优惠活动</i>
                                    </span>
                                    <span class="title-address">
                                        <span>宝安区石岩街道应人石社区天宝路28号</span>
                                        <span></span>
                                    </span>
                                    <div class="title-location">
                                        <span>距离</span>
                                        <span>未知</span>
                                    </div>
                                </div>
                                <span class="pull-right nav">
                                    <i class="iconfont">></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </section> 
        </div>
        <!--{{$route.params.id}}-->

    </div>
</template>

<script>
    import Toopbar  from '../Patch/Toopbar.vue';
    export  default {
        components :{
            Toopbar,
            
        }
    }
</script> 

<style>
    *{ margin:0; padding:0;box-sizing: border-box;}
    body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
    body,input,button,select,textarea,table{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, sans-serif;}
    img{vertical-align:middle;border: 0;}
    a,button{outline: none;}
    .clearfix::before,.clearfix::after{display: table;content: " ";}
    .clearfix::after {clear: both;}
    .pull-right{float: right !important;}
    .nav{padding-left: 0;margin-bottom: 0;list-style: none;}

    .cinema-view{background-color: #fff;width: 100%;}
    .district .title{height: 40px;line-height: 40px;font-size: 14px;padding-left: 16px;background: #e1e1e1;margin-bottom: 1px;color: #636363;cursor: pointer;}
    .district .content{margin-top: 0px;width: 100%;padding: 0;}
    .district .content .cinema-wrap{margin: 0 auto;border-bottom: 1px solid #e1e1e1;cursor: pointer;min-width: 320px;}
    .district .content .cinema-wrap .cinema{border-radius: 5px;padding: 10px 0 12px 16px;cursor: pointer;}
    .district .content .cinema-wrap .cinema .cinema-title{width: 75%;min-width: 230px;float: left;cursor: pointer;overflow: hidden;}
    .district .content .cinema-wrap .cinema .nav{padding-right: 15px;line-height: 36px;color: #c6c6c6;}
    .district .content .cinema-wrap .cinema .cinema-title .title-cinemaname{display: inline-block;font-size: 16px;width: 100%;margin-bottom: 5px;}
    .district .content .cinema-wrap .cinema .cinema-title .title-cinemaname i {    font-style: normal;margin-right: 3px;}
    .district .content .cinema-wrap .cinema .cinema-title .title-cinemaname i:first-child {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align: text-top;max-width: 80%;}
   
    .district .content .cinema-wrap .cinema .cinema-title .title-cinemaname .ticket {color:#88aec8;font-size: 20px;}
    .district .content .cinema-wrap .cinema .cinema-title .title-cinemaname .book {color:#fc8558;font-size: 20px;}

    .district .content .cinema-wrap .cinema .cinema-title .title-tip{display: inline-block;margin-bottom: 5px;font-size: 10px;}
    .district .content .cinema-wrap .cinema .cinema-title .title-tip i {display: inline-block;border-radius: 3px;padding: 0 5px;margin: 0 5px;font-style: normal;color: #fff;height: 15px;line-height: 15px;}
    .district .content .cinema-wrap .cinema .cinema-title .title-tip .tip-1{background-color:#51add0; }
    .district .content .cinema-wrap .cinema .cinema-title .title-address{display: inline-block;font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;color: #ccc;}
    .district .content .cinema-wrap .cinema .cinema-title .title-location{font-size: 12px;color: #ccc;}

    /*@media screen and (max-width: 320px)
    .district .content .cinema-wrap .cinema .cinema-title .cinema-title-cinemaname i:first-child {
            max-width: 180px;
    }*/
</style>

